let config = {
    // 游戏的状态
    // 0 未开始
    // 1 游戏进行中
    // 2 游戏结束
    status: 0,
    // 病毒生成时间间隔
    interval: 1800,
    // 病毒动画移动速度
    speed: 1,
    level: 1
}
// 分数
let score = 0
let startAlert = document.querySelector("#start-alert")
let gameDesc = document.querySelector(".game-desc")
let footer = document.querySelector("#start-alert footer")

startAlert.onclick = function () {
    stage.style.pointerEvents = 'none'
    gameDesc.classList.add('slide-up')
    footer.classList.add('slide-down')
    setTimeout(() => {
        startAlert.getElementsByClassName.display = 'none'
    }, 500);
    startGame()
    config.status = 1
}

var timer, updater;
function startGame() {
    timer = setInterval(function () {
        makeVirus()
    }, config.interval)
    updater = setInterval(function () {
        update()
    }, 16)
}

let game = document.querySelector('#game')
let letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
// 获得游戏场景
let stage = document.querySelector("#stage")
// ui层
let uiLayer = document.querySelector('#ui')
let virues = []
// 生成病毒
function makeVirus() {
    let virus = document.createElement("div")
    virus.setAttribute("class", 'virus')
    let p = document.createElement('p')
    p.classList.add('letter')
    virus.appendChild(p)
    // 设置病毒的颜色
    switch (Math.floor(Math.random() * 6)) {
        case 0:
            p.style.backgroundImage = 'radial-gradient(rgba(255,150,150,0),rgba(255,0,0,1))';
            p.style.boxShadow = '0 0 15px #f00'; break;
        case 1:
            p.style.backgroundImage = 'radial-gradient(rgba(0, 255, 0, 0),rgba(0,255,0,1))';
            p.style.boxShadow = '0 0 15px #f00'; break;
        case 2:
            p.style.backgroundImage = 'radial-gradient(rgba(0, 0, 255, 0),rgba(0,0,255,1))';
            p.style.boxShadow = '0 0 15px #f00'; break;
        case 3:
            p.style.backgroundImage = 'radial-gradient(rgba(255, 255, 0, 0),rgba(255,255,0,1))';
            p.style.boxShadow = '0 0 15px #f00'; break;
        case 4:
            p.style.backgroundImage = 'radial-gradient(rgba(0, 255, 255, 0),rgba(0,255,255,1))';
            p.style.boxShadow = '0 0 15px #f00'; break;
        case 5:
            p.style.backgroundImage = 'radial-gradient(rgba(255, 0, 255, 0),rgba(255,0,255,1))';
            p.style.boxShadow = '0 0 15px #f00'; break;
    }
    let letter = letters[Math.floor(Math.random() * 26)]
    p.innerHTML = letter
    virus.style.left = Math.random() * (stage.offsetWidth - 100) + 'px'
    virus.letter = letter
    game.appendChild(virus)
    virues.push(virus)
}
let winH = stage.offsetHeight;
// update 动画，刷新元素的位置
function update() {
    for (let i = 0; i < virues.length; i++) {
        let virus = virues[i]
        virus.style.top = virus.offsetTop + config.speed + 'px'
        if (virus.offsetTop > (winH - 200) && !uiLayer.warning) {
            showWarning()
            uiLayer.warning = true
        } else if (virus.offsetTop >= winH) {
            // game over
            gameOver()
        }
    }
}
function showWarning() {
    let warningLayer = document.createElement('div')
    warningLayer.setAttribute("class", 'warning')
    uiLayer.appendChild(warningLayer)
}

let gameOverAlert = document.querySelector('#game-over-alert')
function gameOver() {
    clearInterval(timer)
    clearInterval(updater)
    config.status = 2
    gameOverAlert.style.display = "block"
    stage.style.pointerEvents = ''
}

let scoreLabel = document.getElementById('score-label')
let xmEffect = document.querySelector('#xm')
let level = document.querySelector('#level')

window.addEventListener("keyup", function (e) {
    let key = e.key;
    for (let i = 0; virues.length; i++) {
        let virus = virues[i]
        // console.log(virus.letter)
        if (virus.letter.toLowerCase() === key.toLocaleLowerCase() && config.status === 1) {
            let dieImg =document.querySelector('img')
            game.src = './imgs/virus-die.png'
            dieImg.style.position = 'absolute'
            dieImg.style.left = virus.offsetLeft + 'px'
            dieImg.style.top = virus.offsetTop + 'px'
            dieImg.classList.add('fade-out')

            setTimeout(function () {
                game.removeChild(dieImg)
            }, 1000)
            game.removeChild(virus)
            virues.splice(i, 1)
            score = score + 2
            scoreLabel.innerHTML = score
            if (score >= 10) {
                config.speed = 2
                config.interval = 1500
                config.level = 2
            }
            if (score >= 30) {
                config.speed = 3
                config.interval = 800
                config.level = 3
            }
            if (score >= 50) {
                config.speed = 5
                config.interval = 500
                config.level = 4
            }
            level.innerHTML = config.level
            xmEffect.currentTime = 0
            xmEffect.play()
        }
    }
})

// 重玩
let restartBtn = document.querySelector('#restart-btn')
restartBtn.onclick = function () {
    gameOverAlert.style.display = 'none'
    resetGame()
}

function resetGame() {
    config.status = 1;
    score = 0;
    config.level = 1
    config.speed = 1
    scoreLabel.innerHTML = score;
    level.innerHTML = config.level
    game.innerHTML = ''
    virues = []
    uiLayer.removeChild(document.querySelector('.warning'))
    uiLayer.warning = false;
    startGame()
}